<template>
  <a-space direction="vertical" :size="16" fill>
    <a-card
      class="general-card"
      title="地温监控表"
      :header-style="{ paddingBottom: '12px' }"
    >
      <div v-for="(item, i) in groundTotayList" :key="i">
        <a-breadcrumb style="margin-bottom: 16px">
          <a-breadcrumb-item>地温</a-breadcrumb-item>
          <a-breadcrumb-item>{{ item.workshop_alias }}</a-breadcrumb-item>
        </a-breadcrumb>
        <a-button
          type="primary"
          style="float: right"
          v-if="appStore.device !== 'mobile'"
          @click="openGroundTodayModal(item)"
          >新增数据</a-button
        >
        <a-table
          :columns="item.columns"
          :data="item.data"
          stripe
          sticky-header
          :bordered="{ wrapper: true, cell: true }"
          :scroll="scroll"
        >
          <template #operate="{ record }" v-if="appStore.device !== 'mobile'">
            <a-button type="text" @click="editGround(item, record)"
              >编辑</a-button
            >
          </template>
        </a-table>
      </div>
    </a-card>
    <GroundTodayModal ref="groundTodayModal" :getGroundTotayInfo="getGroundTotayInfo" />
  </a-space>
</template>

<script lang="ts" setup>
import GroundTodayModal from './ground-today-modal.vue';
import { ref } from 'vue';
import { useAppStore } from '@/store';

const appStore = useAppStore();
const props = defineProps({
  groundTotayList: {
    type: Array,
    default: () => [],
  },
  getGroundTotayInfo:{
    type: Function,
  }
});
const scroll = {
  x: 900,
};
const groundTodayModal = ref('');
// 打开新增数据弹窗
const openGroundTodayModal = (item: any) => {
  groundTodayModal.value.openModal(item);
};
const editGround = (item: any, record: any) => {
  groundTodayModal.value.openModal(item, record);
};
</script>